<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<input class="uni-input search-area" v-model="keywords" @confirm="search" focus
					placeholder="搜索你想了解的私信..." />
			</view>
		</view>

		<!-- 侧滑列表 -->
		<view class="list">
			<scroll-view class="list" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
				@refresherrefresh="refresh" @scrolltolower="loadmore">
				<view v-for="(item,index) in messList" :key="index" class="swipe-action u-border-top u-border-bottom">
					<view class="item">
						<view class="business">
							<view class="avatar">
								<image mode="aspectFit" v-if="item.sender.avatar_text" :src="item.sender.avatar_text">
								</image>
								<image mode="aspectFit" v-else src="/static/avatar.png"></image>
							</view>
						</view>

						<view class="info">
							<navigator v-if="item.sender.nickname"
								:url="'/pages/business/center?accessToBusid=' + item.sender.id" class="nickname">{{
									item.sender.nickname }}</navigator>
							<navigator v-else :url="'/pages/business/center?accessToBusid=' + item.sender.id"
								class="nickname">
								匿名用户</navigator>
							<view class="desc">
								{{ item.content }}
							</view>
							<view class="action">
								<view class="btn">
									<u-button type="primary" text="发私信" @click="addMess(item.sender.id)" size="mini"
										shape="circle"></u-button>
								</view>
								<view class="btn">
									<u-button type="warning" v-if="item.status === '0'" @click="Detail(item)" text="查看私信"
										size="mini" shape="circle"></u-button>
									<u-button type="warning" v-else :plain="true" @click="Detail(item)" text="已读"
										size="mini" shape="circle"></u-button>
								</view>
								<view class="btn">
									<u-button type="error" text="删除" @click="delModel(item.id)" size="mini"
										shape="circle"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>


		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 查看私信详情内容弹框组件 -->
		<u-modal :show="messShow" :title="senNickname" confirmText="关闭" @confirm="closeContent" @close="closeContent"
			:closeOnClickOverlay="true">
			<view class="slot-content">
				<rich-text :nodes="messContent"></rich-text>
			</view>
		</u-modal>

		<!-- 删除弹框组件 -->
		<u-modal :show="delShow" :title="'删除提醒'" :content="'是否确认删除私信'" showCancelButton :closeOnClickOverlay="true"
			@cancel="delShow = false; delid = '0'" @close="delShow = false; delid = '0'" @confirm="delMess"></u-modal>

		<!-- 发送私信弹出层 -->
		<u-popup :show="PrivateLetterShow" @close="PrivateLetterShow = false">
			<view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="letter" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item label="填写私信内容：" prop="content" ref="content">
						<u--textarea v-model="letter.content" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>

					<view class="btn">
						<u-button type="primary" text="发送私信" formType="submit" @click="sending"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>

		<!-- 回到顶部按钮 -->
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
export default {
	// 获取到url上的访问者id accessToBusid
	onLoad() {
		// 登录人账号信息
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

		// 获取当前登录用户的所有私信（别人发的）
		this.getMessages()
	},
	//上拉加载
	onReachBottom() {
		if (this.finished) return;

		this.page++
		this.getMessages()
	},
	// 回到顶部事件
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	data() {
		return {
			business: {}, // 当前登录用户信息
			messList: [], // 私信列表
			messShow: false, // 私信详情弹框
			messContent: '', // 私信内容
			senNickname: '', // 发信人昵称
			keywords: '',
			triggered: false,
			finished: false,
			page: 1,
			scrollTop: 0,
			delShow: false, // 删除弹框
			delid: '0', // 需要删除的私信id
			PrivateLetterShow: false, // 私信弹出层显示隐藏状态
			letter: {  // 私信内容
				content: '',
			},
			recid: '0', //收件人id
			rules: {  // 私信内容验证器
				content: {
					type: 'string',
					required: true,
					message: '请填写私信内容',
					trigger: ['blur', 'change']
				},
			},
		}
	},
	methods: {
		// 搜索私信
		search() {
			this.messList = []
			this.refresh()
		},
		// 获取当前用户的所有私信
		async getMessages() {
			// 判断用户是否登录
			// 未登录
			if (!this.business || !this.business.id) {
				this.$refs.notice.show({
					type: 'error',
					message: '请先登录'
				})
				return false
			}
			//组装数据
			var data = {
				page: this.page,
				recid: this.business.id,
				keywords: this.keywords
			}
			var result = await uni.$u.http.post('/messages/index', data)
			//改变下拉的状态
			this.triggered = false
			if (result.code == 0) {
				this.finished = true

				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			}
			this.messList = result.data
		},
		// 查看私信详情
		async Detail(item) {
			this.messShow = true
			this.messContent = item.content
			this.senNickname = item.sender.nickname ? item.sender.nickname : '匿名用户'
			// 修改私信状态（数据库中同步修改）
			// 当当前私信状态status为false时执行
			if (item.status === '0') {
				// 组装数据
				var data = {
					id: item.id,
					status: '1'
				}
				// 发起请求
				var result = await uni.$u.http.post('/messages/changeStatus', data)
				if (result.code == 0) {
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false
				}
				this.getMessages()
			}
		},
		// 关闭私信详情弹框事件
		closeContent() {
			this.messShow = false
		},
		//刷新事件
		refresh() {
			this.triggered = true;
			this.finished = false;
			this.messList = []
			this.getMessages()
		},
		delModel(id) {
			this.delShow = true;
			this.delid = id;
		},
		// 删除私信
		async delMess() {
			this.delShow = false
			//未登录
			if (!this.business || !this.business.id) {
				this.$refs.notice.show({
					type: 'error',
					message: '请先登录'
				})
				return false
			}
			// 发起请求
			var result = await uni.$u.http.post('/messages/del', { id: this.delid, busid: this.business.id })

			if (result.code == 0) {
				this.$refs.notice.show({
					type: 'error',
					message: result.msg
				})
				return false
			} else {
				this.$refs.notice.show({
					type: 'success',
					message: result.msg
				})
				this.messList = []
				this.getMessages()
			}
		},
		// 发送私信弹框显示隐藏
		addMess(recid) {
			this.PrivateLetterShow = true
			this.recid = recid
		},
		// 发送私信
		sending() {
			this.$refs.answer.validate()
				.then(async res => {  // 通过表单效验后执行的回调函数
					this.PrivateLetterShow = false

					//未登录
					if (!this.business || !this.business.id) {
						this.$refs.notice.show({
							type: 'error',
							message: '请先登录'
						})

						return false
					}

					//组装数据
					var data = {
						senid: this.business.id, // 发件人id  当前登录的用户id 
						recid: this.recid, // 收件人id  当前界面显示的用户id
						content: this.letter.content // 私信内容
					}

					var result = await uni.$u.http.post('/messages/add', data)

					if (result.code == 0) {
						this.$refs.notice.show({
							type: 'error',
							message: result.msg
						})
						return false
					} else {
						this.$refs.notice.show({
							type: 'success',
							message: result.msg
						})
						this.letter.content = ''
					}
				}).catch(error => {
					this.$refs.notice.show({
						type: 'error',
						message: '私信内容效验失败'
					})
				})
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	overflow-x: hidden;
}

.search {
	height: 238rpx;
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	align-content: center;
}

.search-area {
	width: 100%;
	padding-left: 40px;
	height: 88rpx;
	background-color: #fff;
	background-image: url("/static/search.png");
	background-repeat: no-repeat;
	background-size: 30rpx 30rpx;
	background-position: 35rpx 30rpx;
	border-radius: 11rpx;
	line-height: 88rpx;
	color: #2f2e2e;
	font-size: 30rpx;
}

.list .item {
	display: flex;
	width: 95%;
	margin: 10px auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .nickname,
.info .desc {
	margin-bottom: 2px;
}

.info .nickname {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	font-weight: bold;
}

.info .desc {
	font-size: .8em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	margin-bottom: .5em;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.info .action {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

.info .action .btn {
	margin-right: 10px;
}

/* 回答内容 */
.answer {
	padding: 15px;
}
</style>
